<template>
	<view class="page" :style="[pageStyle]">
		<view v-for="(item, index) in pagesData" :key="index">
			<lazy-component>
				<template v-if="item.name == 'search' && item.show">
					<w-search :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'navigation' && item.show">
					<w-navigation :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'banner' && item.show">
					<w-banner :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'title' && item.show">
					<w-title :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'rubik' && item.show">
					<w-rubik :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'notice' && item.show">
					<w-notice :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'blank' && item.show">
					<w-blank :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'separate' && item.show">
					<w-separate :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'goodsgroup' && item.show">
					<w-goodsgroup :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'tabs' && item.show">
					<w-tabs :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'coupon' && item.show">
					<w-coupon :content="item.content" :styles="item.styles" @refresh="getPageInfo" />
				</template>
				<template v-else-if="item.name == 'seckill' && item.show">
					<w-seckill :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'spellgroup' && item.show">
					<w-spellgroup :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'video' && item.show">
					<w-video :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'graphic' && item.show">
					<w-graphic :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'hotarea' && item.show">
					<w-hotarea :content="item.content" :styles="item.styles" />
				</template>
				<!-- #ifdef MP-WEIXIN -->
				<template v-else-if="item.name == 'mnplive' && item.show">
					<w-mnplive :content="item.content" :styles="item.styles" />
				</template>
				<!-- #endif -->
				<view slot="skeleton" style="height: 10vh"></view>
			</lazy-component>
		</view>
		<tabbar />
	</view>
</template>
<script>
import { apiMiniPage } from '@/api/store';
export default {
	data() {
		return {
			styles: {},
			pagesData: []
		};
	},
	onLoad() {
		this.getPageInfo();
	},
	methods: {
		getPageInfo() {
			const { id } = this.$Route.query;
			apiMiniPage({
				id
			}).then((res) => {
				const {
					common: { title },
					common,
					content
				} = res;

				uni.setNavigationBarTitle({
					title
				});
				this.styles = common;
				this.tempData = content.map((item, index) => {
					return {
						index,
						value: item
					};
				});
				this.splitSetData();
			});
		},
		splitSetData() {
			const item = this.tempData.shift();
			if (!item) return;
			this.$set(this.pagesData, item.index, Object.freeze(item.value));
			setTimeout(() => {
				this.splitSetData();
			}, 100);
		}
	},
	computed: {
		pageStyle() {
			const { background_color, background_image, background_type } = this.styles;
			if (background_type == 0) return;
			const style =
				background_type == 1
					? {
							'background-color': background_color
					  }
					: {
							'background-image': `url(${background_image})`
					  };
			return style;
		}
	}
};
</script>

<style lang="scss">
.page {
	background-repeat: no-repeat;
	background-size: 100% auto;
	overflow: hidden;
	min-height: calc(100vh - env(safe-area-inset-bottom));
}
</style>